/**
 * @class AlertBox
 * @class MsgBox
 * @class Menu
 */

class AlertBox {
  constructor(text, timeOut, type = 'success') {
    this.ele = document.createElement('div');
    this.ele.classList.add('alert', type);
    this.ele.innerHTML = `<p>${text}</p>`;
    document.body.appendChild(this.ele);
    if (timeOut) {
      setTimeout(() => {
        this.remove();
      }, timeOut);
    }
  }

  remove() {
    this.ele.remove();
  }
}

class MsgBox {
  constructor({ title, text, btns }) {
    window.game.pause = true;
    this.ele = document.createElement('div');
    this.ele.classList.add('msgBox');
    this.ele.innerHTML = `
    <div class="msgBoxContent">
      <div class="title">${title}</div>
      <div class="msg">${text}</div>
      <div class="btns">
      </div>
    </div>
    `;
    const btnsEle = this.ele.querySelector('.btns');
    btns.forEach((d) => {
      const btn = document.createElement('div');
      btn.classList.add('btn');
      btn.innerHTML = `
        <div class="process yellow BT">
          <div class="haveWork half"></div>
        </div>
        <div class="box-text">${d.title}</div>
      `;
      btnsEle.appendChild(btn);
      bind(btn, 'click', () => {
        d.work();
        this.toCancel();
      });
    });
    document.body.appendChild(this.ele);
  }
  toCancel() {
    this.ele.remove();
    window.game.pause = false;
  }
}

class Menu {
  constructor(customer, foods, menu) {
    window.game.pause = true;
    this.customer = customer;
    this.ele = document.createElement('div');
    this.ele.classList.add('menuBox');
    this.cost = 0;
    this.vaildGroup = [];
    this.ele.innerHTML = `
    <div class="menuBoxContent">
      <div class="customer">
      </div>
      <div class="msg note-cost">${customer.userName}正在点餐,已点<span id="haveCost">0</span>元的菜</div>
      <div class="box">
      </div>
    </div>
    `;
    this.haveCostEle = this.ele.querySelector('#haveCost');
    this.ele
      .querySelector('.menuBoxContent')
      .replaceChild(
        customer.ele.cloneNode(true),
        this.ele.querySelector('.customer'),
      );
    this.box = this.ele.querySelector('.box');
    menu.forEach((d, i) => {
      const foodClass = document.createElement('div');
      foodClass.classList.add('foodClass');
      foodClass.setAttribute('min', d.min);
      foodClass.setAttribute('max', d.max);
      foodClass.setAttribute('gid', i);
      let inner = `<div class="row">${d.title}</div>`;
      d.data.forEach((dd, ii) => {
        inner += `
          <div class="row">
            <input type="checkbox" name="food-${i}" id="food-${i}-${ii}" foodid="${foods[dd].id}">
            <label for="food-${i}-${ii}">${foods[dd].foodName}</label>
            <div class="dots"></div>
            <div class="dish-cost">${foods[dd].price}</div>
          </div>
        `;
      });
      foodClass.innerHTML = inner;
      this.box.appendChild(foodClass);
      this.vaildGroup.push(d.min === 0);
      bind(foodClass, 'click', (e) => {
        this.checkboxVaild(foodClass, e);
      });
    });

    const btns = document.createElement('div');
    btns.classList.add('btns');
    btns.innerHTML = `
        <div class="btn btn-disable" id="menu-Submit">
          <div class="process yellow BT">
            <div class="haveWork half"></div>
          </div>
          <div class="box-text">点好了,快点上菜</div>
        </div>
        <div class="btn" id="menu-Cancel">
          <div class="process yellow BT">
            <div class="haveWork half"></div>
          </div>
          <div class="box-text">不吃了</div>
        </div>
    `;
    this.ele.querySelector('.menuBoxContent').appendChild(btns);
    this.submit = this.ele.querySelector('#menu-Submit');
    this.cancel = this.ele.querySelector('#menu-Cancel');
    bind(this.submit, 'click', () => {
      this.toSubmit();
    });
    bind(this.cancel, 'click', () => {
      this.toCancel();
    });
    document.body.appendChild(this.ele);
  }

  checkboxVaild(ele, e) {
    if (e.target.tagName !== 'INPUT') {
      return true;
    }
    this.cost +=
      (1 - !e.target.checked * 2) *
      restaurant.config.foods[e.target.getAttribute('foodid')].price;
    this.haveCostEle.innerText = this.cost;
    const min = ele.getAttribute('min');
    const max = ele.getAttribute('max');
    const haveChecked = ele.querySelectorAll('input:checked');
    const notChecked = ele.querySelectorAll('input:not(:checked)');
    if (haveChecked.length === +max) {
      notChecked.forEach((d) => d.setAttribute('disabled', true));
    } else {
      notChecked.forEach((d) => d.removeAttribute('disabled'));
    }
    this.vaildGroup[Number.parseInt(ele.getAttribute('gid'), 10)] =
      haveChecked.length >= min && haveChecked.length <= max;
    if (this.vaildGroup.findIndex((d) => d === false) === -1) {
      this.submit.classList.remove('btn-disable');
    } else {
      this.submit.classList.add('btn-disable');
    }
    return false;
  }

  toSubmit() {
    if (this.submit.classList.contains('btn-disable')) return false;
    // prettier-ignore
    const menuList = [...this.box.querySelectorAll('input:checked')].map((d) => (
      Number.parseInt(d.getAttribute('foodid'), 10)
    ));
    restaurant.saveMenu(this.customer, menuList);
    this.ele.remove();
    window.game.pause = false;
    return true;
  }

  toCancel() {
    window.game.pause = false;
    this.ele.remove();
    restaurant.delCustom(this.customer);
  }
}
